<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title> 时钟 </title>
</head>
<style>
ol,ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
/* 表盘 */
.clock {
	position: relative;
	width: 200px;
	height: 200px;
	margin: 50px auto;
	border-radius: 100%;
	background-color: #292a38;
}
.pointer li.circle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	margin-left: -5px;
	border-radius: 100%;
	transform-origin: left center;
	background: #fff;
}
/* 刻度 */
.line-hour li, .line-min li {
	position: absolute;
	left: 50%;
	top: 50%;
	transform-origin: left center;
	background-color: #fff;
}
.line-hour li {
	width: 10px;
	height: 2px;
}
.line-min li {
	width: 5px;
	height: 2px;
}
/* 数字 */
.number {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 150px;
	height: 150px;
	font-size: 15px;
	color: #fff;
	transform: translate(-50%, -50%);
}
.number li {
	position: absolute;
	transform: translate(-50%, -50%);
}
/* 指针 */
.pointer li {
	position: absolute;
	top: 50%;
	left: 50%;
	transform-origin: left center;
	background: #fff;
}
.pointer li.hour {
	width: 45px;
	height: 3px;
	margin-top: -1px;
}
.pointer li.min {
	width: 60px;
	height: 2px;
	margin-top: -1px;
}
.pointer li.sec {
	width: 80px;
	height: 1px;
	margin-top: -1px;
}
</style>
<body>
<div class="clock">
	<!-- 秒刻度 -->
	<ul class="line-min"></ul>
	<!-- 时刻度 -->
	<ul class="line-hour"></ul>
	<!-- 数字 -->
	<ol class="number"></ol>
	<!-- 指针和中间圆点 -->
	<ul class="pointer">
		<li class="hour"></li>
		<li class="min"></li>
		<li class="sec"></li>
		<li class="circle"></li>
	</ul>
</div>

<script>
const init = () => {
	const min = document.getElementsByClassName('line-min')[0]
	const hour = document.getElementsByClassName('line-hour')[0]
	const num = document.getElementsByClassName('number')[0]

	drawLines(min, 60, 85);
	drawLines(hour, 12, 80);
	drawNumbers(num);

	move();
}
/**
 *@Description 绘制钟表刻度线
 *@Return wrap 刻度线的父容器、total 刻度线的总个数、translateX 刻度线在x轴方向的偏移量.
**/
const drawLines = (wrap, total, translateX) => {
	let strHtml = '';
	const gap = 360 / total;

	for(let i = 0; i < total; i++){
		strHtml += '<li style="transform:rotate('+ (i * gap) + 'deg) translate(' + translateX + 'px, -50%)"></li>';
	}

	wrap.innerHTML=strHtml;
}
/**
 *@Description 绘制时钟数字
 *@Return wrap 数字的父容器.
**/
const drawNumbers = (wrap) => {
	let strHtml = '';
	const radius = wrap.offsetWidth / 2;

	for(let i = 1; i <= 12; i++){
		const myAngle = (i - 3) / 6 * Math.PI;
		const myX = radius + radius * Math.cos(myAngle); // x = r + rcos(θ)
		const myY = radius + radius * Math.sin(myAngle); // y = r + rsin(θ)

		strHtml += '<li style="left:' + myX + 'px; top:'+ myY +'px">' + i + '</li>';
	}

	wrap.innerHTML = strHtml;
}
/**
 *@Description
 *@Return 钟表走动，转动秒针、分针、时针.
**/
const move = () => {
	const domHour = document.getElementsByClassName("hour")[0]; // 时
	const domMin = document.getElementsByClassName("min")[0]; // 分
	const domSec = document.getElementsByClassName("sec")[0]; // 秒

	setInterval(function(){
		const now = new Date();
		const hour = now.getHours();
		const min = now.getMinutes();
		const sec = now.getSeconds();

		const secAngle = sec * 6 - 90;  // s * 6-90
		const minAngle = min * 6 + sec * 0.1 - 90;  // m * 6 + s * 0.1 - 90
		const hourAngle = hour * 30 + min * 0.5 - 90;  // h * 30 + m * 0.5 - 90

		domSec.style.transform =  "rotate(" + secAngle + "deg)";
		domMin.style.transform = `rotate(${minAngle}deg)`; 
		domHour.style.transform = `rotate(${hourAngle}deg)`; 

		document.title = hour + ':' + min + ':' + sec;

	}, 1000);
}

window.onload = () => {
	init();
}
</script>
</body>
</html>